import { Fragment, useEffect, useRef } from "react";
import useStore from "../store";
import { TaskProps } from "../types";
import styles from "./style.module.less";
import { date } from "../helpers";
interface TasksProps {
  tasks: TaskProps[];
}

const RenderTree = (props: TasksProps): React.ReactElement => {
  const hoverId = useStore((state) => state.hoverId);
  const setHoverId = useStore((state) => state.setHoverId);
  return (
    <>
      {props.tasks.map((task) => {
        return (
          <Fragment key={task.id}>
            <div
              className={`${styles.item} ${
                task.id == hoverId ? styles.hover : ""
              }`}
              onMouseOver={() => {
                setHoverId(task.id);
              }}
              onMouseOut={() => {
                setHoverId("");
              }}
            ></div>
            {task.children && task.children.length > 0 && task.toggle && (
              <RenderTree tasks={task.children} />
            )}
          </Fragment>
        );
      })}
    </>
  );
};

interface GridProps {
  height: number;
}

const Grid = (props: GridProps) => {
  const weekend = [0, 6];
  const tasks = useStore((state) => state.tasks);
  const scrollTop = useStore((state) => state.scrollTop);
  const scrollLeft = useStore((state) => state.scrollLeft);
  const setScrollTop = useStore((state) => state.setScrollTop);
  const [startDate, endDate] = date.getTasksRange(tasks);
  const months = date.getMonthsInRange(startDate, endDate);
  const days = date.getDatesInRange(startDate, endDate);
  const gridRef = useRef<HTMLDivElement>(null);
  const gridContainerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (gridRef.current) {
      gridRef.current.scrollTop = scrollTop;
      gridRef.current.scrollLeft = scrollLeft;
    }
    if (gridContainerRef.current) {
      gridContainerRef.current.scrollLeft = scrollLeft;
    }
  }, [scrollLeft, scrollTop]);
  return (
    <div
      className={styles.container}
      style={{ height: `${props.height}px` }}
      ref={gridContainerRef}
    >
      <div className={styles.header} style={{ width: `${days.length * 40}px` }}>
        <div className={styles.top}>
          {Object.entries(months).map(([month, number], index) => (
            <div key={index} style={{ width: `${number * 40}px` }}>
              {month}
            </div>
          ))}
        </div>
        <div className={styles.bottom}>
          {days.map((day) => {
            return (
              <div
                key={day.format("YYYYMMDD")}
                style={{
                  color: weekend.includes(day.day())
                    ? "rgba(255,255,255,0.6)"
                    : "#FFF",
                }}
              >
                {day.format("DD")}
              </div>
            );
          })}
        </div>
      </div>
      <div
        className={styles.items}
        style={{ width: `${days.length * 40}px` }}
        ref={gridRef}
        onWheel={(e) => {
          if (e.deltaMode !== 0) {
            const lineHeight = 16;
            e.deltaY = e.deltaY * lineHeight;
            e.deltaMode = 0;
          }
          const scrollAmount = Math.abs(e.deltaY) * 2;
          e.currentTarget.scrollTop +=
            e.deltaY > 0 ? scrollAmount : -scrollAmount;
          setScrollTop(e.currentTarget.scrollTop);
        }}
      >
        <RenderTree tasks={tasks} />
      </div>
    </div>
  );
};

export default Grid;
